import React, { Fragment } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Progress,DatePicker, Space, Button,Table} from 'antd';
import "./Order.module.css"
const Order = () => { 
  const Amount: React.FC = () => (
    <Space wrap>
      <Progress type="circle" percent={20} width={80} strokeColor='red' />
      <Progress type="circle" percent={80} width={80} />
      <Progress type="circle" percent={95} width={80} strokeColor='green' />
      <Progress type="circle" percent={30} width={80} strokeColor='red' />
      <Progress type="circle" percent={50} width={80} strokeColor='orange' />
      <Progress type="circle" percent={46} width={80} strokeColor='green' />
      <Progress type="circle" percent={35} width={80} strokeColor='purple' />
      <Progress type="circle" percent={59} width={80} />
      <Progress type="circle" percent={15} width={80} strokeColor='deeppink' />
    </Space>
  );
   
      const columns = [
        {
          title: '产品编号',
          dataIndex: 'name',
        },
        {
          title: '产品名称',
          dataIndex: 'name',
        },
        {
          title: '总价',
          dataIndex: 'name',
        },
        {
          title: '优惠',
          dataIndex: 'name',
        },
        
        {
          title: '类型',
          dataIndex: 'name',
        },
        {
          title: '订单时间',
          dataIndex: 'chinese',
          sorter: {
            compare: (a:any, b:any) => a.chinese - b.chinese,
            multiple: 3,
          },
        },
        {
          title: '数量',
          dataIndex: 'math',
          sorter: {
            compare: (a:any, b:any) => a.math - b.math,
            multiple: 2,
          },
        },
        {
          title: '状态',
          dataIndex: 'english',
          sorter: {
            compare: (a:any, b:any) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '操作',
          dataIndex: 'name',
        },
      ];
      const data = [
        {
          key: '1',
          name: 'John Brown',
          chinese: 98,
          math: 60,
          english: 70,
        },
        {
          key: '2',
          name: 'Jim Green',
          chinese: 98,
          math: 66,
          english: 89,
        },
        {
          key: '3',
          name: 'Joe Black',
          chinese: 98,
          math: 90,
          english: 70,
        },
        {
          key: '4',
          name: 'Jim Red',
          chinese: 88,
          math: 99,
          english: 89,
        },
      ];
      const onChange = (pagination:any, filters:any, sorter:any, extra:any) => {
        console.log('params', pagination, filters, sorter, extra);
      };
    return (
      
        <fieldset>
          <div className="jdt">
          <Amount />
          </div>
          <br />
            产品名称 <input type="text" placeholder='输入品牌名称' />
            <span>&nbsp;&nbsp;添加时间&nbsp;&nbsp;</span>
            <Space direction="vertical">
                {/* <span>添加时间</span> */}
                 <DatePicker  placeholder="请选择时间" />
            </Space>
            &nbsp;&nbsp;
            <Button type="primary" icon={<SearchOutlined />}>
                             查询
                 </Button>
            <Table columns={columns} dataSource={data} onChange={onChange} />
        </fieldset>
        
    )
}

export default Order
